<template>
  <div class="div">
    <div>{{ message }}</div>
    <div>jdash</div>
    <div>{{ aaa }}</div>
    <p v-if="seen">现在你看到我了</p>
    <div>{{ number + 3 }}</div>
    <div>{{ messages.split("").reverse().join("") }}</div>
    <div>{{ ok ? "YES" : "NO" }}</div>
    <div>{{ reversedMessage() }}与aaa对应</div>
    <div>{{ fullName() }}</div>
    <div>{{ fullName() }}</div>
    <div>++++++++++++++++++</div>
    <p>
      Ask a yes/no question:{{ question }}
      <input v-model="question" />
    </p>
    <p>{{ answer }}</p>

    <div v-bind:class="isActive ? 'activeClass' : ''">class的空间的</div>
    <div :class="0 == active ? 'selected' : ''">djfksfhsdf</div>

    <!-- <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">最后一个</div> //active是css属性名 -->

    <!-- v-bind绑定数组 -->
    <div v-bind:class="[a, b]">
      v-bind绑定数组 对应下面classa和classb的两个属性
    </div>
    <div v-bind:style="{ color: 'red', fontSize: '25px' }">style属性</div>
    <div :style="{ color: color, fontSize: size + 'px' }">style属性</div>

    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
    <div>
      ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    </div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" />
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" />
    </template>
    <button>dianji</button>

    <div v-show="oks">v-show显示隐藏：元素会被渲染保留在DOM中</div>
    <div v-show="okss">
      v-if
      是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
      v-if
      也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
      相比之下，v-show
      就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS
      进行切换。 一般来说，v-if 有更高的切换开销，而 v-show
      有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show
      较好；如果在运行时条件很少改变，则使用 v-if 较好 当 v-if 与 v-for
      一起使用时，v-for 具有比 v-if 更高的优先级
    </div>
    <div>
      hsh少时所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所shsh
    </div>
    <div>
      <ul>
        <li v-for="(item, index) of items" :key="item.num">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
      </ul>
    </div>
    <div>
      <div v-for="(value, name, index) in object" :key="value.num">
        {{ index }}. {{ name }}: {{ value }}
      </div>
    </div>
    <div v-for="item in items" v-bind:key="item.id">
      <!-- 内容 -->
      {{ item.message }}------哈哈哈========{{ item.id }}
    </div>
    <div>
      push()在数组的末尾添加一个或多个元素 返回数组新长度;
      pop()移除数组的最后一项，返回移除的项; shift()
      移除数组的第一项，返回移除项; unshift()
      在数组的第一项前面添加一个或多个元素，返回数组的长度
    </div>
    <button @click="click">点击</button>
    <div>
      <li v-for="n in evenNumbers" :key="n.num">{{ n }}</li>
    </div>
    <div>
      <p>{{ counter }}</p>
      <button @click="counter += 1">加法</button>
      <button @click="counter -= 1">减法</button>
    </div>
    <button @click="www">v-on</button>
    <div>
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    <span>Multiline message is:</span>
    <p style="white-space: pre-line">{{ message }}</p>
    <br />
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    <input type="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
    <div>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames" />
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
      <label for="mike">Mike</label>
      <br />
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    <div>
      <input type="radio" id="one" value="One" v-model="picked" />
      <label for="one">One</label>
      <br />
      <input type="radio" id="two" value="Two" v-model="picked" />
      <label for="two">Two</label>
      <br />
      <span>Picked: {{ picked }}</span>
    </div>
    <div>
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    <div>
      <select v-model="selecteds">
        <option
          v-for="option in options"
          :key="option.num"
          v-bind:value="option.value"
        >
          {{ option.text }}
        </option>
      </select>
      <span>Selected: {{ selecteds }}</span>
    </div>
    <div>
      <input v-model.number="age" type="number" />
      <span>自动抓换成number类型</span>
      <input v-model.lazy="msg" /><span
        >输入框值输入完毕才显示值::{{ msg }}</span
      >
      <input v-model.trim="mssg" /><span
        >自动过滤用户输入的首尾空白字符::{{ mssg }}</span
      >
    </div>
    <div>
      <ul class="ul">
        <li>不可思议的CSS</li>
        <li>导航栏</li>
        <li>光标小下划线跟随</li>
        <li>PURE CSS</li>
        <li>Nav Underline</li>
      </ul>
    </div>
    <div>
      <button v-on:click="show = !show">Toggle</button>
      <transition name="fade">
        <p v-if="show">hello</p>
      </transition>
    </div>
    <div>
      <button @click="shows = !shows">Toggle 过度</button>
      <transition name="slide-fade">
        <p v-if="shows">hello</p>
      </transition>
    </div>
    <div>
      <button @click="showss = !showss">Toggle 动画</button>
      <transition name="bounce">
        <p v-if="showss">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
          facilisis enim libero, at lacinia diam fermentum id. Pellentesque
          habitant morbi tristique senectus et netus.
        </p>
      </transition>
    </div>

    <div id="staggered-list-demo">
      <input v-model="query" />
      <transition-group
        name="staggered-fade"
        tag="ul"
        v-bind:css="false"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
      >
        <li
          v-for="(item, index) in computedList"
          v-bind:key="item.msg"
          v-bind:data-index="index"
        >
          {{ item.msg }}
        </li>
      </transition-group>
    </div>
    <button @click="promices">异步 promise</button>
    <div ref="hello">
      <h1>qdleader</h1>
    </div>
    <section>
      <h1 ref="hello">{{ valuevalue }}</h1>
      <button type="danger" @click="get">点击</button>
    </section>
    <button @click="functionss">函数调用</button>
    <button @click="functionsstwo">函数调用2</button>
    <button @click="functionssthree">函数调用3</button>
    <button @click="functionssfour">函数调用4</button>
    <button @click="functionssfive">函数调用5</button>
    
  </div>
</template>

<script>
export default {
  name: "value",
  components: {},
  data() {
    return {
      valuevalue: "qqqsdfggv",
      buyTypes: [
        {
          label: "红色版",
          value: 0,
        },
        {
          label: "绿色版",
          value: 1,
        },
        {
          label: "紫色版",
          value: 2,
        },
      ],
      query: "",
      list: [
        { msg: "Bruce Lee" },
        { msg: "Jackie Chan" },
        { msg: "Chuck Norris" },
        { msg: "Jet Li" },
        { msg: "Kung Fury" },
      ],
      show: true,
      shows: true,
      showss: true,
      selected: "",
      msg: "",
      mssg: "sdsad dscds",
      age: "2",
      selecteds: "A",
      options: [
        { text: "One", value: "A" },
        { text: "Two", value: "B" },
        { text: "Three", value: "C" },
      ],
      checked: true,
      counter: 0,
      picked: "One",
      numbers: [1, 2, 3, 4, 5],
      checkedNames: [],
      object: {
        title: "How to do lists in Vue",
        author: "Jane Doe",
        publishedAt: "2016-04-10",
      },
      items: [
        { message: "hahaha", id: "0" },
        { message: "额呵呵", id: "1" },
        { message: "sdfksl", id: "2" },
      ],
      parentMessage: "不知道",
      oks: true,
      okss: false,
      loginType: "username",
      color: "yellowgreen",
      size: "30",
      firstName: "Foos",
      lastName: "Bars",
      // fullName: "Foo Bar",
      message: "Hello Vue!",
      seen: true,
      number: 3,
      messages: "abcdefg",
      ok: false,
      question: "",
      answer: "哈加哈哈啊哈哈哈哈",
      isActive: false,
      active: 1,
      // isActive: true,
      // hasError: false
      a: "classa",
      b: "classb",
      type: "A",
    };
  },
  watch: {
    question() {
      this.answer = "如果question发生改变 这个函数会运行 变化的watch";
    },
  },
  methods: {
    functionssfive() {
      //   function myFunction(a, b) {
      //     return a * b;
      //   }
      //   myObject = myFunction.call(myObject, 10, 2);
      //   console.log(myObject);
    },
    functionssfour() {
      // 构造函数:
      //   function myFunction(arg1, arg2) {
      //     console.log(this);
      //     console.log(arg1);
      //     this.firstName = arg1;
      //     this.lastName = arg2;
      //   }
      //   // This    creates a new object
      //   var x = new myFunction("Johnss", "Doe");
      //   console.log(x.firstName);
    },
    functionssthree() {
      var myObjects = {
        firstName: "Johns",
        lastName: "Dosse",
        fullName: function () {
          return this.firstName + " " + this.lastName;
        },
      };
      console.log(myObjects.fullName());
      var myObject = {
        firstName: "John",
        lastName: "Doe",
      };
      function fullName() {
        return myObject.firstName + " " + myObject.lastName;
      }
      console.log(fullName());
    },
    functionsstwo() {
      function myFunction() {
        return this;
      }

      console.log(myFunction());
    },
    functionss() {
      function myFunction(a, b) {
        return a * b;
      }
      console.log(myFunction(10, 2));
    },
    get() {
      this.valuevalue = "你好啊";
      console.log(this.$refs["hello"].innerText);
      this.$nextTick(() => {
        console.log(this.$refs["hello"].innerText);
      });
    },
    promices() {
      var promise = new Promise(function (resolve, reject) {
        console.log("good");
        var a = 10;
        var b = a + 25;
        if (b === 35) {
          // 一旦异步执行成功，我们就调用内置的 resolve函数，将pending状态转化为resolved，并且传入我们希望传出的执行成功后的结果。
          // 注意： 这里一旦状态转变，那么后面就一定会调用then方法中的第一个参数的函数，然后将我们传入给resolve的参数传给then方法中的第一个方法作为参数，我们就可以在then的第一个方法中使用了。
          resolve(b);
        } else {
          reject("异步执行失败");
        }
      });
      promise.then(
        function (value) {
          console.log("异步执行成功，输出执行结果：" + value);
        },
        function (error) {
          console.log("异步执行失败，输出执行结果：" + error);
        }
      );
      // let promise = new Promise(function (resolve, reject) {
      //   console.log('Promise');
      //   resolve();
      // });

      // promise.then(function () {
      //   console.log('Resolved.');
      // });

      // console.log('Hi!');
    },
    say(msg) {
      alert(msg);
    },
    www() {
      alert("222");
    },
    reversedMessage: function () {
      return this.message.split("").reverse().join("");
    },
    fullName: function () {
      return this.firstName + " === " + this.lastName;
    },
    click() {
      console.log();
      this.items[0] = { message: "额呵呵", id: "1" };
      // this.items.push({ message: '啦啦啦', id: '0' })
    },
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.height = 0;
    },
    enter(el, done) {
      var delay = el.dataset.index * 150;
      console.log(delay);
      console.log(done);
    },
    leave(el, done) {
      var delay = el.dataset.index * 150;
      //   setTimeout(function () {
      //     Velocity(el, { opacity: 0, height: 0 }, { complete: done });
      //   }, delay);
      console.log(delay);
      console.log(done);
    },
  },
  creatde() {
    console.log(this.$ref["hello"]);
    this.$nextTick(() => {
      console.log(this.$ref["hello"]);
    });
  },
  // mounted() {
  //   alert("sss");
  // },
  // beforeCraeted() {
  //   alert("eee");
  // },
  // destroyed() {
  //   alert("yyyy");
  // },
  // created() {
  //   alert("aaaa");
  // },
  computed: {
    computedList: function () {
      var vm = this;
      return this.list.filter(function (item) {
        return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1;
      });
    },
    aaa() {
      return this.message.split("").reverse().join("");
    },
    evenNumbers() {
      return this.numbers.filter(function (number) {
        return number % 2 === 0;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.div{
  border-top: 20px solid #f0f2f5;
  padding: 15px 20px;


}
.activeClass {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  color: red;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s;
}

.fade-enter,
  .fade-leave-to

  /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.active {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  color: red;
}

.classa {
  color: yellowgreen;
}

.classb {
  font-size: 20px;
}

.selected {
  width: 100px;
  height: 100px;
  background-color: red;
}

.button {
  height: 200px;
  width: 200px;
}

.ul {
  list-style: none;
}

.ul > li {
  /* border-bottom: 0px solid #000; */
  display: inline-block;
  margin-left: 20px;
}

.ul > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}

/* 
  .ul>li:hover::before {
    width: 100%;
  } */

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
  .slide-fade-leave-to

  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

.bounce-enter-active {
  animation: bounce-in 3s;
}

.bounce-leave-active {
  animation: bounce-in 3s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}
</style>